<!DOCTYPE html>
<html style="
weidth:100%" >
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beijing University of Post and Telecommunications</title>
<script src="jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
var a = $(window).width();
alert(a)
$(".pig").click(function(){
var ying="<img src='shitou.png' class='yingle'>";   

$(".flash").after(ying);
$(".flash").remove();


})




})

</script>
<style>


body{
text-align:center;
background-image:url(background.jpg);
    background-repeat:no-repeat;
}
.tou {
height:100px;
weidht:100px;}

.flash{
height 80px;
width:80px;}

.yingle{
height 80px;
width:80px;
}
</style>
</head>
<body style="
weidth:100%" >
<div class ="touxiang">
<img src="touxiang.jpg" alt="touxiang"  class="tou"> 
</div>
<div class=""cflash">
<img src="shitou.gif" alt="dongtu" class="flash"
</div>
<button  class="pig">

</div>


</body>


</html>